<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->

<head>

	<!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8">
	<title>Brave Responsive Business Template</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

	<!-- CSS
  ================================================== -->
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/skeleton.css">
	<link rel="stylesheet" href="css/screen.css">
    <link rel="stylesheet" href="css/mediaelementplayer.css" />
    <!--[if IE 7]>
        <link rel="stylesheet" href="stylesheets/ie7.css">
    <![endif]-->

	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
    
    <!-- Fonts
	================================================== -->
    
    <!-- Scripts
	================================================== -->
    <script src="js/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="js/jquery.animate-colors-min.js" type="text/javascript"></script>
    <script src="js/ddsmoothmenu.js" type="text/javascript"></script>
    <script src="js/jquery.cssAnimate.mini.js" type="text/javascript"></script>
    <script src="js/jquery.fitvids.js" type="text/javascript"></script>
    <script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
	<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
    <script src="js/mediaelement-and-player.min.js"></script>
    <script src="js/screen.js" type="text/javascript"></script>
    
</head>

<body>

	<!-- Site Backgrounds
	================================================== -->
	
    <!-- Change to class="poswrapheaderline wide" and class="headerline full" for a full-width header line -->
	<div class="poswrapheaderline"><div class="headerline"></div></div>  
    <!-- Remove or uncomment depending on if you want a background image or tile -->
    <div class="tiledbackground"></div>
    <!--img src="images/bg.jpg" alt="" id="background" /-->
    <!-- Change to class="poswrapper wide" and class="whitebackground full" for a full-width site background -->
    <div class="poswrapper"><div class="whitebackground"></div></div>

	<div class="container main portfolio4column">
    
        <!-- Header | Logo, Menu
		================================================== -->
	
		<div class="sixteen columns header">
        
			<a href="index-2.html" class="logohover"><div class="logo"></div></a>
            <div class="mainmenu">
                <div id="mainmenu" class="ddsmoothmenu">
                    <ul>
                        <li><a href="#">HOME<br/><span>Info About Us</span></a>
                            <ul>  
                                <li><a href="index-2.html">Home Layout</a></li>
                                <li><a href="index_alternative.html">Another Layout Example</a></li>
                                <li><a href="index_noslider.html">No Slider</a></li>
                            </ul>
                        </li>
                        <li><a href="#">FEATURES<br/><span>What We Offer</span></a>
                            <ul> 
                            	<li><a href="page_about.html">About / Services</a></li>
                            	<li><a href="page_pricing.html">Pricing</a></li>
                                <li><a href="page_clients.html">Clients</a></li>
                                <li><a href="page_faq.html">FAQ</a></li>
                                <li><a href="page_full.html">Full Page & Background Image</a></li>
                                <li><a href="page_sidebar_left.html">Sidebar Left Page</a></li>
                                <li><a href="page_sidebar_right.html">Sidebar Right Page</a></li>
                                <li><a href="#">Another Menu Level</a>
                                    <ul>  
                                        <li><a href="#">Menu Entry One</a></li>
                                        <li><a href="#">Menu Entry Two</a></li>
                                        <li><a href="#">Menu Entry Three</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">PORTFOLIO<br/><span>See Our Work</span></a>
                            <ul>  
                                <li><a href="portfolio_4column.html">Portfolio Four Columns</a></li>
                                <li><a href="portfolio_1column_full.html">Portfolio Full</a></li>
                                <li><a href="portfolio_single.html">Project Detail Page</a></li>
                            </ul>
                        </li>
                        <li><a href="#">BLOG<br/><span>Latest News</span></a>
                            <ul>  
                                <li><a href="blog_overview.html">Blog Overview</a></li>
                                <li><a href="blog_single.html">Single Blog Post</a></li>
                                <li><a href="blog_overview_full.html">Blog Overview Full</a></li>
                                <li><a href="blog_single_full.html">Single Blog Post Full</a></li>
                            </ul>
                        </li>	
                        <li><a href="contact.html">CONTACT<br/><span>Get In Touch</span></a></li>	
                    </ul>
                    <br style="clear: left" />
                </div>
                
                <!-- Responsive Menu -->
                
				<form id="responsive-menu" action="#" method="post">
                    <select>
                        <option value="">Navigation</option>
                    </select>
				</form>
				
            </div>
		</div>
        
        <!-- Page Title And Social
		================================================== -->
        
		<div class="pagetitle">
        	<div class="pagetitleholder"><h1>Contact Us.</h1></div>
            <div class="socialholder">
            	<ul class="socialicons">
                	<li><a href="#" class="social_facebook"></a><div>Facebook</div></li>
                    <li><a href="#" class="social_twitter"></a><div>Twitter</div></li>
                    <li><a href="#" class="social_googleplus"></a><div>GooglePlus</div></li>
                    <li><a href="#" class="social_vimeo"></a><div>Vimeo</div></li>
                    <li><a href="#" class="social_rss"></a><div>RSS Feed</div></li>
                    <li><a href="#" class="social_linkedin"></a><div>LinkedIn</div></li>
                    <li><a href="#" class="social_flickr"></a><div>Flickr</div></li>
                    <li><a href="#" class="social_youtube"></a><div>Youtube</div></li>
                    <li><a href="#" class="social_pinterest"></a><div>Pinterest</div></li>
                </ul>
			</div>
            <!--div class="pagetitlebackground"></div-->
        </div>
                 
        <!-- Google Maps -->
        <div class="mapsholder row">
            <div id="googlemap"></div>
        </div>
        
        <!-- Content Holder -->
		<div class="sixteen columns row textblock left">

            
            <!-- Content Holder -->
			<div class="seven columns row alpha">
            
            	<h3><strong><em>Tell us what you think about Brave Studios!</em></strong></h3>
    
                <!-- 2 column -->
                <div class="one_half">
     				<p><span class="lighti">Company Location</span><br/>
                        Brave Studios<br/>
                        Mainstreet 123<br/>
                        50600, Cologne, Germany<br/><br/>
                        
                        <span class="lighti">How To Contact Us</span><br/>
                        Email: <a href="mailto:your@email.com">info@yourdomain.com</a><br/>
                        Phone: 800.123.4567<br/><br/>
                        
                        <span class="lighti">Office Hours</span><br/>
                        Mondays-Friday: 09:00 - 18:00<br/>
                        Saturday: 10:00 - 15:00</p> 
                </div>
                <div class="one_half lastcolumn">
                	<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                </div><div class="clear"></div>
                
            </div>

            <!-- Comment Form -->  
            <div class="eight columns row omega offset-by-one">
                <form id="contactform" method="post" action="#">
                    <input type="text" name="name" id="reply_name" class="requiredfield" onFocus="if(this.value == 'Name *') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Name *'; }" value="Name *"/>
                    <input type="text" name="email" id="reply_email" class="requiredfield last" onFocus="if(this.value == 'Email *') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Email *'; }" value="Email *"/>
                    <input type="text" name="address" id="reply_address" class="" onFocus="if(this.value == 'Address') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Address'; }" value="Address"/>
                    
                    <input type="text" name="Phone" id="reply_website" class="last" onFocus="if(this.value == 'Phone') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Phone'; }" value="Phone"/>
                    <textarea name="message" id="reply_message" class="requiredfield" onFocus="if(this.value == 'Message *') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Message *'; }">Message *</textarea>
                    <button type="submit" name="send">Send Message</button>
                    <span class="errormessage">Error! Please correct marked fields.</span>
                    <span class="successmessage">Message send successfully!</span>
                    <span class="sendingmessage">Sending...</span>  
                </form>
            </div>
 
            <div class="clear"></div>
		</div>

        <!-- Space Adjuster
        ================================================== -->
        
        <div class="sixteen columns bottomadjust"></div>
   
	</div><!-- container -->

	<!-- Footer
	================================================== -->
	
    <!-- Change to class="container footerwrap full" for a full-width footer -->
	<div class="container footerwrap">
    
    	<div class="footerclose"></div>
    
        <div class="footer">
        	<div class="sixteen columns">

                
                <div class="four columns clearfix widget alpha">
                   <h5>LATEST TWEETS</h5>
                    <div class="widget_tweets">
                        <ul></ul>
                        <div class="clear"></div>
                    </div>
                </div>
                
                <div class="four columns widget">
                    <h5>POPULAR BLOG POSTS</h5>
                    <div class="widget_blogposts">
                        <ul>
                        	<li class="clearfix">
                            	<a href="#" class="borderhover"><img src="images/thumbs/pop_blog1.jpg" alt="" /></a>
                                <div class="postlink"><a href="#">Pretty Widgets</a></div>
                                <div class="subline">January 23, 2012</div>
                            </li>
                        	<li class="clearfix">
                            	<a href="#" class="borderhover"><img src="images/thumbs/pop_blog2.jpg" alt="" /></a>
                                <div class="postlink"><a href="#">Convenient Structure</a></div>
                                <div class="subline">January 21, 2012</div>
                            </li>
                            <li class="clearfix">
                            	<a href="#" class="borderhover"><img src="images/thumbs/pop_blog3.jpg" alt="" /></a>
                                <div class="postlink"><a href="#">Another Blog Post</a></div>
                                <div class="subline">January 17, 2012</div>
                            </li>
                            <li class="clearfix">
                            	<a href="#" class="borderhover"><img src="images/thumbs/pop_blog4.jpg" alt="" /></a>
                                <div class="postlink"><a href="#">Responsive Layout</a></div>
                                <div class="subline">January 3, 2012</div>
                            </li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                </div>
                          
                <div class="four columns widget">
                    <h5>Contact Info</h5>
                    <div class="widget_text">
                        <span class="lighti">Company Location</span><br/>
                        Brave Studios, Cologne City Branch<br/>
                        Mainstreet 123<br/>
                        50600, Cologne, Germany<br/><br/>
                        
                        <span class="lighti">How To Contact Us</span><br/>
                        Email: <a href="mailto:your@email.com" class="linkbg">info@yourdomain.com</a><br/>
                        Phone: 800.123.4567<br/><br/>
                        
                        <span class="lighti">Office Hours</span><br/>
                        Mondays-Friday: 09:00 - 18:00<br/>
                        Saturday: 10:00 - 15:00
                    </div>
                </div>

                <div class="four columns widget omega">
                    <h5>QUICK CONTACT</h5>
                    <div class="widget_quickcontact">
                        <form id="quickcontact" method="post" action="#">
                        <input type="text" name="name" id="quickcontact_name" class="requiredfield" onFocus="if(this.value == 'Name *') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Name *'; }" value='Name *'/>
                        <input type="text" name="email" id="quickcontact_email" class="requiredfield" onFocus="if(this.value == 'Email *') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Email *'; }" value='Email *'/>
                        <textarea name="message" id="quickcontact_message" class="requiredfield" onFocus="if(this.value == 'Message *') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Message *'; }">Message *</textarea>
                        <button type="submit" name="send">Send</button>
                        <span class="errormessage">Error! Please correct marked fields.</span>
                        <span class="successmessage">Message send successfully!</span>
                        <span class="sendingmessage">Sending...</span>      
                        </form>
                    </div>
                </div><div class="clear"></div>
                
            </div>
        </div>
	</div><!-- container -->
    
    <!-- Sub-Footer
	================================================== -->
    
    <!-- Change to class="container subfooterwrap full" for a full-width subfooter -->
    <div class="container subfooterwrap">
    
    	<div class="footeropen"></div>
    
    	<div class="subfooter">
        	<div class="eight columns siteinfo">&copy; Copyright &copy; 2013.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></div>
            <div class="eight columns sitenav">
                <a href="#">Home</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Features</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Portfolio</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Blog</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Contact</a>
            </div>
        </div>
    </div>

<!-- End Document
================================================== -->

<script type="text/javascript">	

function initGoogleMaps() {
	/* Google Maps Init */
	var myLatlng = new google.maps.LatLng(50.935816, 6.961212);
	var myOptions = {
		zoom: 14,
		center: myLatlng,
		popup: true,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var map = new google.maps.Map(document.getElementById("googlemap"), myOptions);
	
	var marker = new google.maps.Marker({
		position: myLatlng, 
		map: map,
		title: "Our Office Location"
	});
	google.maps.event.addListener(marker, 'click', function() {
		map.setZoom(17);
	});
}

</script>
<div style="display:none"></div>
</body>
</html>